<!-- 借调对账 -->
<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData">
      <template #carInfo="{ record }">
        <div>{{ record.licenseNo }}</div>
        <div>{{ record.modelName }}</div>
      </template>
    </table-index>
  </div>
</template>

<script setup name="TransferReconciliationList">
  import { ref, reactive, onMounted, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import { getReconciliationList } from '@/api/asset/carTransfer'
  import { evalQueryParam } from '@/utils'

  import useNavigate from '@/hooks/useNavigate'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routeQuery = route.query

  const { navigateTo } = useNavigate()

  const dict = usePageDict('carTransferDict')
  // 查询条件
  const searchList = computed(() => {
    return [
      {
        label: '业务单信息',
        prop: 'code',
        type: 'a-input',
      },
      {
        label: '车牌号',
        prop: 'carId',
        type: 'remote-select',
        attrs: {
          type: 'car_licenseno_list',
          params: {
            operateStatusList: [10, 20, 30, 50],
          },
        },
      },
      {
        label: '归属门店',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          type: 'multiple_site_listBystaff',
          params: {
            idList: oldIdList.value,
          },
        },
      },
      { label: '借调类型', prop: 'typeList', type: 'a-select', options: dict.typeEnum, attrs: { multiple: true } },
      {
        label: '借调开始时间',
        prop: 'startDateRange',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:23:59'],
          },
        },
        change: (value = []) => {
          queryParam.startTimeStart = value[0]
          queryParam.startTimeEnd = value[1]
        },
      },
      {
        label: '借调结束时间',
        prop: 'endDateRange',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:23:59'],
          },
        },
        change: (value = []) => {
          queryParam.endTimeStart = value[0]
          queryParam.endTimeEnd = value[1]
        },
      },
      {
        label: '借调公司',
        prop: 'sourceId',
        type: 'remote-select',
        attrs: {
          type: 'transferCompany',
        },
      },
      { label: '借调状态', prop: 'statusList', type: 'a-select', options: dict.statusEnum, attrs: { multiple: true } },
      {
        label: '创建人',
        prop: 'staffId',
        type: 'remote-select',
        attrs: {
          type: 'store_staff_list',
        },
      },
      {
        label: '车型',
        prop: 'modelId',
        type: 'remote-select',
        attrs: {
          type: 'car_model_tenantList',
        },
      },
    ]
  })

  const queryParam = reactive({
    startDateRange: [],
    endDateRange: [],
  })

  // table 配置
  const table = useTable({
    columns: [
      { title: '业务单信息', dataIndex: 'code', fixed: 'left', width: 170 },
      { title: '车辆信息', dataIndex: 'licenseNo', slotName: 'carInfo', width: 240 },
      { title: '归属门店', dataIndex: 'siteName', width: 150 },
      { title: '借调类型', dataIndex: 'typeName', width: 100 },
      { title: '借调开始时间', dataIndex: 'startTime', width: 170 },
      { title: '借调结束时间', dataIndex: 'endTime', width: 170 },
      { title: '租期', dataIndex: 'rentDays', width: 170 },
      { title: '借调公司', dataIndex: 'sourceName', width: 150 },
      { title: '费用金额', dataIndex: 'amount', unit: '元', width: 110 },
      { title: '待结费用', dataIndex: 'outstandingAmount', unit: '元', width: 110 },
    ],
    operates: [
      {
        label: '结算/修改费用',
        permission: 'svms:finance:reconciliation:transferReconciliation.sure',
        method: (record) => {
          navigateTo(
            `/finance/reconciliation/transferReconciliation/reconciliation/${record.id}?id=${record.id}&carId=${record.carId}&type=${record.type}&code=${record.code}&flag=detail`,
            `结算/修改费用-${record.code}`
          )
        },
      },
    ],
    operateColumnWidth: 120,
    buttons: [],
  })
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getReconciliationList)

  const oldIdList = ref([])
  onMounted(() => {
    if (routeQuery.code) {
      queryParam.code = routeQuery.code
    }
    // 借调类型
    if (routeQuery.typeList) {
      const typeList = evalQueryParam(routeQuery.typeList)
      queryParam.typeList = typeList
    }
    // 归属门店
    if (routeQuery.siteIdList) {
      let siteIdList = evalQueryParam(routeQuery.siteIdList)
      // 门店id转换为数组
      const siteIdList2 = siteIdList.map((item) => String(item))
      queryParam.siteIdList = siteIdList2
      oldIdList.value = siteIdList2
    }
    // 借调状态
    if (routeQuery.statusList) {
      const statusList = evalQueryParam(routeQuery.statusList)
      queryParam.statusList = statusList
    }

    loadData()
  })
</script>

<style lang="less" scoped></style>
